<template>
	<view>
		<view class="Date">
			<view class="Date-top">
				<uni-scroll 
				   id="scroll" 
				   style="width: 100%;" 
				   bg-color="#ffffff" 
				   :bold="bold" 
				   :active-color="activeColor" 
				   :list="MonthList"
				   @change="Scrochange" 
				   :current="current" 
				   :is-scroll="isScroll" 
				   :offset="offset">
				</uni-scroll>
			</view>
			<view class="Date-bottom">
				<view class='weekdays'>
					<view>日</view>
					<view>一</view>
					<view>二</view>
					<view>三</view>
					<view>四</view>
					<view>五</view>
					<view>六</view>
				</view>
				<view class="Date-swiper">
					<swiper 
					   class="swiper" 
					   :current="current" 
					   @change="swiperChange" 
					   :indicator-dots="indicatorDots" 
					   :autoplay="autoplay" 
					   :interval="interval" 
					   :duration="duration" :style="{height:reHeight()+'px'}">
						<swiper-item v-for="(i,n) in days" :key="n">
							<view class="Date-bottom_day">
								<view 
								   class="day_view" 
								   v-for='(item,index) in i' :key='index' @tap="dateTap(item)">
								  <view 
								     :class="['day_viewzi',selectId(item,n) ? 'day_viewactive' : '',item.ac_id && item.ac_id != 0 && item.state == 1 ? 'day_viewD' : 'day_no']">
									   <text class="size26">{{item.day}}</text>
									   <text class="day_price size16" v-if="item.ac_id > 0 && item.state == 1">{{`￥${item.min_price}`}}{{item.str}}</text>
									   <text class="day_nostatus size16" v-if="item.ac_id > 0 && item.state != 1">{{item.state | statepl}}</text>
								   </view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniScroll from '@/components/uni-scroll/uni-scroll.vue';
	export default {
		components:{
			uniScroll
		},
		props:{
			//月份数据
			MonthList:{
				type:Array,
				default:()=>{
					return [];
				}
			},
			teamId:{
				type:Number,
				default:0
			}
		},
		filters:{
			statepl(state){
				let text = '';
				switch(+state){
					case 2:
					   text = '余位不足';
					   break;
					case 3:
					   text = '已过期';
					   break;
					case 4:
					   text = '已报名';
					   break;
				}
				return text;
			}
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				isScroll: true,
				tabCountIndex: 0,
				activeColor:'#BF3736',
				bold: false,
				control: true,
				offset: [5, -5],
				currentDay: 1,
				currentMonth: 1,
				currentYear: 1970,
				currentWeek: 1,
				// days: [],
				current:0,
				dateTime:'2019/11/05 10:39',
				year: 0, //当前日期年
				month: 0, //当前日期月数
				daynum:[31,28,31,30,31,30,31,31,30,31,30,31],//1-12月每个月的天数
				days:[],
				checkId:this.teamId,
				dateHeight:0,
				checkPirce:0
			};
		},
		mounted() {
			for(let f=0;f<this.MonthList.length;f++){
				this.days.push([])
			  }
			this.isyear(this.year)//判断平年闰年
			this.initdata()
		},
		methods:{
			reHeight(){
				const {dateHeight} = this;
				var px = uni.upx2px(110);
				var total = (dateHeight / 6) * px;
				// console.log()
				return total;
			},
			swiperChange(e){
			   this.current = e.detail.current;
			   this.$forceUpdate();
			},
			//初始
			selectcurrent(){
				const {teamId,days} = this;
				let index = 0;
				days.forEach((item,ind)=>{
					item.forEach((t,n)=>{
						if(t.ac_id && t.ac_id == teamId){
							index = ind;
						}
					})
				})
				this.current = index;
				// console.log(index)
			},
			selectId(item,index){
				const {checkId} = this;
				// if(checkId === id){
				// 	this.current = index;
				// }
				return checkId === item.ac_id && item.state == 1;
			},
			dateTap(item){
				// console.log(item)
			  if(!item.ac_id || item.state != 1){
				  return;
			  }
			  const {current,days} = this;
			  this.checkId = item.ac_id;
			  this.$emit('Idevent',item.ac_id);
			},
			Scrochange(e){
				console.log(e)
				this.current = e;
				this.$forceUpdate();
			},
			// 判断平年闰年
			isyear(val){
				if(val%4==0 && val%100!=0 || val%100==0 && val%400==0){
					this.daynum[1]=29
				}else{
					this.daynum[1]=28
			  }
			},
			initdata(){
				  const {MonthList,current} = this;
				  MonthList.forEach((item,index)=>{
					  this.nowmonth(item.year,item.month,item.day,index)
				  })
				  this.reHeight();
			},
			//计算日历高度
			heightFun(index = 1,height=0){
				for(let i=0;i<this.days.length;i++){
					if(height < this.days[i].length){
						height = this.days[i].length;
					}
				}
				if(this.days.length >= index){
					// console.log(1);
					return height;
				}else{
					index++;
					// return 0;
					return this.heightFun(index,height);
				}
			},
			// 计算当月多少天
			nowmonth(year,month,day,index){
				 var daylength=this.daynum[month-1]
				 this.days[index].splice(0)  //清空原数组
				 var list = JSON.parse(JSON.stringify(day));
				 for(let i=0;i<daylength;i++){
					 this.days[index].push({
						day:i+1,
						flag:false,
						id:i+''+index,
						ac_id:0,
						state:1,
						str:'',
						min_price:0}
					 )
				 }
				 //计算后台日期给定的团期
				 this.days[index].forEach((i,n)=>{
					list.forEach(item=>{
						if(+item.day == i.day){
							i.ac_id = item.id;
							i.state = item.state;
							i.min_price = item.min_price;
							i.str = item.str;
						}
					})
				 })
				 this.dateHeight = this.heightFun();
				 console.log('高度',this.heightFun())
				//获取当月1号是周几，然后向数组中添加空字符串占位
				 var times=new Date(year,month-1,1).getDay()
				 for(let f=0;f<times;f++){
					   this.days[index].unshift(" ")
				 }
				 this.selectcurrent()
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/u-Date.scss';
</style>
